<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
</head>
<body>
	<div class="container">
	    <h1>The Activity Page</h1>
		<div>
			<button type="button" class="btn btn-primary"
				data-toggle="modal" onclick="doShowAddDialog()">模态框方式添加</button>
			<button type="button" class="btn btn-success"
				data-toggle="modal" onclick="doGetActivitys()">刷  新</button>
		</div>
		<div>
			<table class="table">
				<thead>
					<tr>
						<th>id</th>
						<th>title</th>
						<th>category</th>
						<th>startTime</th>
						<th>endTime</th>
						<th>state</th>
						<th>createdTime</th>
						<th colspan="2">Operation</th>
					</tr>
				</thead>
				<tbody>
				   <tr><td colspan="8">Data is Loading....</td></tr>
				</tbody>
			</table>
		</div>
	</div>
	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">Modal title</h4>
				</div>
				<div class="modal-body">
					<form id="atyFormId" class="form-horizontal">
						<input type="hidden" name="id" id="atyId">
						<div class="form-group">
							<label for="titleId" class="col-sm-2 control-label">title</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="title"
									id="titleId" placeholder="title">
							</div>
						</div>
						<div class="form-group">
							<label for="categoryId" class="col-sm-2 control-label">category</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="category"
									id="categoryId" placeholder="category">
							</div>
						</div>
						<div class="form-group">
							<label for="startTimeId" class="col-sm-2 control-label">startTime</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="startTime"
									id="startTimeId" placeholder="yyyy/MM/dd">
							</div>
						</div>
						<div class="form-group">
							<label for="endTimeId" class="col-sm-2 control-label">endTime</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="endTime"
									id="endTimeId" placeholder="yyyy/MM/dd">
							</div>
						</div>
						<div class="form-group">
							<label for="remarkId" class="col-sm-2 control-label">remark</label>
							<div class="col-sm-10">
								<textarea class="form-control" id="remarkId" name="remark"
									placeholder="remark"></textarea>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary" onclick="doSaveActivity()">Save changes</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 当在页面中需要使用bootstrap插件时，需要添加如下两个js，但也要注意顺序 -->
	<script type="text/javascript" src="/jquery/jquery.min.js"></script>
	<script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
	<!-- 假如要在js中获取thymeaf表达式中的数据script标签内部需要th:inline="javascript" -->
	<script th:inline="javascript">
	     $(function(){//页面加载完成以后执行
	    	 debugger
	         //页面加载完成以后去获取活动数据
	         doGetActivitys();
	     });
	     //获取所有活动数据
	     function doGetActivitys(){
	    	 //1.定义url
	    	 var url="doFindActivitys";
	    	 //2.定义params
	    	 var params="";
	    	 //3.发送异步请求获取数据并更新到页面上
	    	 doAjaxGet(url,params,function(result){//List<Activity>
	    		 doHandleQueryResult(result);
	    	 })
	     }
	     function doHandleQueryResult(result){
	    	 var jsonObj=JSON.parse(result);
    		 var tBody=$("tbody");
    		 tBody.empty();//清空tbody中原有内容
    		 for(var i=0;i<jsonObj.length;i++){
    			 tBody.append(doCreateRow(jsonObj[i]));
    		 }
	     }
	     function doInitEditFormData(aty){
	    	 $("#atyId").val(aty.id);
	    	 $("#titleId").val(aty.title);
        	 $("#categoryId").val(aty.category);
        	 $("#startTimeId").val(aty.startTime);
        	 $("#endTimeId").val(aty.endTime);
        	 $("#remarkId").text(aty.remark);
        	 //显示模态框
        	 $('#myModal').modal('show'); 
	     }
	     //呈现添加模态框
	     function doShowAddDialog(){
	    	 $("#atyId").val('');
	    	 $("#titleId").val('');
        	 $("#categoryId").val('');
        	 $("#startTimeId").val('');
        	 $("#endTimeId").val('');
        	 $("#remarkId").text('');
        	 //显示模态框
	    	 $('#myModal').modal('show'); 
	     }
	     function doLoadById(id){
	    	// location.href="doFindById?id="+id;
	    	var url="doFindById";
	    	var params="id="+id;
	    	doAjaxGet(url,params,function(result){
	    		var jsonObj=JSON.parse(result);
	    		doInitEditFormData(jsonObj);
	    	})
	     }
	     function doSaveActivity(){
	    	 //1.定义url
	    	 var url="doSaveActivity";
	    	 //2.定义请求参数
	    	 var params="";
	    	 var id=$("#atyId").val();//获取绑定的数据
	    	 var title=$("#titleId").val();
	    	 var category=$("#categoryId").val();
	    	 var startTime=$("#startTimeId").val();
	    	 var endTime=$("#endTimeId").val();
	    	 var remark=$("#remarkId").val();
	    	 var params="id="+id+"&title="+title+"&category="+category+"&startTime="+startTime+"&endTime="+endTime+"&remark="+remark;
	    	 console.log("params",params);
	    	 //3.发送异步请求
	    	 doAjaxPost(url,params,function(result){//--->Activity
	    		 console.log("result",result);
	    		 var jsonObj=JSON.parse(result);
	    		 $('#myModal').modal('hide'); 
	    		 //刷新页面(查询所有或者页面上局部刷新)
	    		 //doGetActivitys(); 再次查询所有
	    		 //$("tbody").append(doCreateRow(jsonObj));
	    		 //$("tbody").prepend(doCreateRow(jsonObj));
	    		 if(id){//id有值说明是更新
	    		   var tr=$("#"+id).parents("tr");
	    		   //方法1：
	    		   //tr.before(doCreateRow(jsonObj));
	    		   //tr.remove();
	    		   //方法2：
	    		   tr.find("td:eq(1)").text(jsonObj.title);
	    		   tr.find("td:eq(2)").text(jsonObj.category);
	    		   tr.find("td:eq(3)").text(jsonObj.startTime);
	    		   tr.find("td:eq(4)").text(jsonObj.title);
	    		 }else{
	    		   $("tbody").find("tr:eq(0)").before(doCreateRow(jsonObj));
	    		 }
	    	 });
		 }
	     function doCreateRow(obj){
		    	 return `<tr>
		    	           <td>${obj.id}</td>
		    	           <td>${obj.title}</td>
		    	           <td>${obj.category}</td>
		    	           <td>${obj.startTime}</td>
		    	           <td>${obj.endTime}</td>
		    	           <td>${obj.state}</td>
		    	           <td>${obj.createdTime}</td>
		    	           <td>
		    	           <button class="btn btn-danger btn-sm" id=${obj.id} onclick=doDeleteById(${obj.id})>删除</button>
						   <button class="btn btn-warning btn-sm" onclick=doLoadById(${obj.id})>更新</button> 
		    	           </td>
		    	         </tr>`;
	     }
	     //基于ajax方式执行删除操作
	     function doDeleteById(id){
	    	if(!confirm("确定删除吗"))return;
		    //location.href="doDeleteById?id="+id;
		    var url="doDeleteById";
		    var params="id="+id;
		    //var obj=$(this);
		    doAjaxGet(url,params,function(result){
		    	alert(result);
		    	
		        var obj=$("#"+id);
		    	console.log("obj",obj);
		    	$("#"+id).parents("tr").remove();
		    });
	     }
	     //基于此函数向服务端发起ajax Get请求
	     function doAjaxGet(url,params,callback){
	    	 //1.创建xhr对象
	       	 var xhr=new XMLHttpRequest();//Ajax入口对象
	    	 //2.注册Xhr对象的状态监听函数  监听客户端与服务器端通讯的过程
	    	 //readyState==4 并且status==200 状态等于4表示客户端与服务器端通讯结束  状态等于2并且客户端与服务器端响应的过程中服务器端响应的结果是OK的话 状态码是200
	         xhr.onreadystatechange=function(){
	       	    if(xhr.readyState==4){
	       	       if(xhr.status==200){
	       	        callback(xhr.responseText);//xhr.responseText为服务端返回的数据
	       	       }
	       	    }
	       	 }
	    	 //3.创建一个连接
	    	 xhr.open("GET",url+"?"+params,true);//true表示异步执行
	    	 //4.发送请求
	    	 xhr.send(null)
	     }
	     //基于此函数向服务端发起ajax post请求
	     function doAjaxPost(url,params,callback){
	    	 //1.创建xhr对象
	       	 var xhr=new XMLHttpRequest();
	    	 //2.注册Xhr对象的状态监听函数
	         xhr.onreadystatechange=function(){
	       	    if(xhr.readyState==4){
	       	       if(xhr.status==200){
	       	        callback(xhr.responseText);
	       	       }
	       	    }
	       	 }
	    	 //3.创建一个连接
	    	 xhr.open("POST",url,true);//true表示异步执行
	    	 //对于post请求必须设置请求头
	    	 xhr.setRequestHeader("Content-Type",
             "application/x-www-form-urlencoded");
	    	 //4.发送请求
	    	 xhr.send(params)
	     }
	     
	</script>
</body>
</html>